import React, { Component } from 'react'
import { Form, Input, Button } from 'antd'
import './index.css'
import logImg from '../../assets/images/login-l.png'
import loginTitle from '../../assets/images/login-logo.png'
import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'
import { getCodeApi, loginApi } from '../../api/user'
import { message } from 'antd'

export default class Login extends Component {
  state = {
    codeImg: '',
    uuid: '',
  }
  // 登录
  onFinish = async (value) => {
    try {
      const res = await loginApi({ ...value, uuid: this.state.uuid })
      localStorage.setItem('hkCRM', res.data.token)
      console.log('登录', res)
      this.props.history.push('/home')
      message.success('登陆成功')
    } catch (error) {
      message.error('登录失败')
    }
  }

  // 获取验证码
  getCode = async () => {
    const res = await getCodeApi()
    console.log('验证码', res)
    this.setState({
      codeImg: res.data.img,
      uuid: res.data.uuid,
    })
  }
  componentDidMount() {
    this.getCode()
  }

  render() {
    const { codeImg } = this.state
    return (
      <div className="login login-container">
        <div className="login-container">
          <div className="imageBox">
            <img src={logImg} alt="" />
          </div>
          <div className="form">
            <Form
              size="large"
              name="basic"
              autoComplete="off"
              className="login-form"
              onFinish={this.onFinish}
              initialValues={{
                username: 'admin',
                password: '123456',
              }}
            >
              <div className="titleBox">
                <img src={loginTitle} alt="" />
                <span>汇客CRM系统</span>
              </div>
              <Form.Item
                name="username"
                rules={[{ required: true, message: '用户名不能为空' }]}
              >
                <Input
                  placeholder="用户名"
                  prefix={<UserOutlined className="site-form-item-icon" />}
                />
              </Form.Item>

              <Form.Item
                name="password"
                rules={[{ required: true, message: '密码不能为空' }]}
              >
                <Input.Password
                  placeholder="密码"
                  prefix={<LockOutlined className="site-form-item-icon" />}
                />
              </Form.Item>

              <Form.Item
                name="code"
                rules={[{ required: true, message: '验证码不能为空' }]}
              >
                <Input
                  placeholder="验证码"
                  prefix={<SafetyOutlined className="site-form-item-icon" />}
                  style={{ width: '125px' }}
                />
              </Form.Item>

              <div className="codeImg">
                <img
                  src={'data:image/gif;base64,' + codeImg}
                  alt=""
                  style={{ height: '32px', width: '85px' }}
                  onClick={this.getCode}
                />
              </div>
              <Form.Item>
                <Button type="primary" htmlType="submit" block>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    )
  }
}
